---
import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
import { isEventCatalogChatEnabled as hasEventCatlaogChatLicense, isSSR } from '@utils/feature';
import { BotMessageSquare } from 'lucide-react';
const hasChatLicense = hasEventCatlaogChatLicense();

if (hasChatLicense) {
  return Astro.redirect('/chat');
}
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="generator" content={Astro.generator} />
    <title>EventCatalog chat?</title>
  </head>
  <body>
    <VerticalSideBarLayout title="AI Chat">
      <div class="min-h-[calc(100vh-60px)] bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
          {/* Hero Section */}
          <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center mb-16">
            <div>
              <div class="inline-flex items-center px-4 py-2 rounded-full bg-purple-100 text-purple-700 font-medium text-sm mb-6">
                <BotMessageSquare className="w-4 h-4 mr-2" />
                EventCatalog: Agent
              </div>
              <h1 class="text-4xl font-bold text-gray-900 tracking-tight mb-4">Ask. Understand. Ship faster.</h1>
              <p class="text-xl text-gray-600 mb-8">
                Get answers about your architecture — instantly. Connect to your own AI models and data.
              </p>
              <div class="flex flex-col sm:flex-row gap-4 mb-2">
                <a
                  href="https://www.eventcatalog.dev/docs/development/guides/eventcatlaog-chat/what-is-eventcatalog-chat"
                  target="_blank"
                  class="inline-flex items-center juNot ready for AI chat? You castify-center px-6 py-3 border border-transparent text-base font-medium rounded-lg text-white bg-purple-600 hover:bg-purple-700 transition-colors duration-150"
                >
                  Get Started
                  <svg class="ml-2 w-4 h-4" viewBox="0 0 20 20" fill="currentColor">
                    <path
                      fill-rule="evenodd"
                      d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
                      clip-rule="evenodd"></path>
                  </svg>
                </a>
                <a
                  href="https://www.eventcatalog.cloud"
                  target="_blank"
                  class="inline-flex items-center justify-center px-6 py-3 border border-gray-300 text-base font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50 transition-colors duration-150"
                >
                  Try for free
                </a>
              </div>

              <p class="text-sm text-gray-500 italic mb-6">Available with EventCatalog Starter or Scale plans</p>

              {
                !isSSR() && (
                  <p class="text-sm text-gray-500 my-4 bg-yellow-50 p-4 rounded-lg">
                    <span class="font-bold">This feature is only available on server side.</span> You can switch to server side by
                    setting the <code class="font-mono bg-gray-100 p-0.5 rounded">output</code> property to{' '}
                    <code class="font-mono bg-gray-100 p-0.5 rounded">server</code> in your{' '}
                    <code class="font-mono bg-gray-100 p-0.5 rounded">eventcatalog.config.js</code> file.
                  </p>
                )
              }
            </div>

            <div class="relative">
              <div class="absolute -inset-4">
                <div
                  class="w-full h-full max-w-full mx-auto opacity-30 blur-lg filter"
                  style="background: linear-gradient(90deg, #C084FC 0%, #818CF8 100%);"
                >
                </div>
              </div>
              <div class="relative">
                <div class="bg-white rounded-xl shadow-xl border border-gray-200 overflow-hidden">
                  <div class="bg-gray-50 px-4 py-3 border-b border-gray-200">
                    <div class="flex items-center space-x-2">
                      <div class="w-3 h-3 bg-red-400 rounded-full"></div>
                      <div class="w-3 h-3 bg-yellow-400 rounded-full"></div>
                      <div class="w-3 h-3 bg-green-400 rounded-full"></div>
                    </div>
                  </div>
                  <div class="p-4 space-y-4">
                    <div class="flex justify-end">
                      <div class="bg-purple-600 text-white rounded-2xl rounded-tr-sm px-4 py-2 max-w-md text-sm">
                        What services publish order.created?
                      </div>
                    </div>

                    <div class="flex justify-start">
                      <div class="bg-gray-50 rounded-2xl rounded-tl-sm px-4 py-3 max-w-md shadow-sm">
                        <p class="text-gray-700 text-sm">
                          The <span class="font-semibold">Order Service</span> publishes the order.created event.
                        </p>
                        <p class="text-gray-700 text-sm mt-2 mb-1">This event is consumed by:</p>
                        <ul class="space-y-1 text-gray-600 text-sm">
                          <li>• Payment Service - Initiates payment processing</li>
                          <li>• Inventory Service - Updates stock levels</li>
                          <li>• Notification Service - Sends order confirmations</li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Features Section */}
          <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
              <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
                <svg class="w-6 h-6 text-purple-600" viewBox="0 0 24 24" fill="currentColor">
                  <path
                    d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
                  ></path>
                </svg>
              </div>
              <h3 class="text-lg font-semibold text-gray-900 mb-2">Direct Answers</h3>
              <p class="text-gray-600">
                Ask questions about your catalog and get direct answers, using your own models and API keys.
              </p>
            </div>

            <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
              <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
                <svg class="w-6 h-6 text-purple-600" viewBox="0 0 24 24" fill="currentColor">
                  <path
                    d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z"
                  ></path>
                </svg>
              </div>
              <h3 class="text-lg font-semibold text-gray-900 mb-2">Smart Insights</h3>
              <p class="text-gray-600">Get intelligent suggestions and insights about your architecture automatically.</p>
            </div>

            <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
              <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
                <svg class="w-6 h-6 text-purple-600" viewBox="0 0 24 24" fill="currentColor">
                  <path
                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"
                  ></path>
                </svg>
              </div>
              <h3 class="text-lg font-semibold text-gray-900 mb-2">Privacy First</h3>
              <p class="text-gray-600">
                Runs on your own infrastructure, and your own models. Provide your own API keys to get started.
              </p>
            </div>
          </div>

          {/* Bottom Link */}
          <div class="mt-16 text-center">
            <a
              href="https://www.eventcatalog.dev/docs/development/guides/customize-sidebars/application-sidebar"
              target="_blank"
              class="text-sm text-gray-400 hover:text-gray-500 transition-colors duration-150"
            >
              Not ready for AI chat? You can hide this feature in settings
            </a>
          </div>
        </div>
      </div>
    </VerticalSideBarLayout>
  </body>
</html>

<style>
  .scroll-smooth {
    scroll-behavior: smooth;
  }
</style>
